<script setup lang="ts">
import BreadCrumb from '@/components/breadCrumb.vue';
import { ref } from 'vue';
import { getAllSwiper, getPolicy } from '@/api/setting.js';
import { bus } from '@/utils/mitt.js';
import Introduce from './component/introduce.vue';
import {
    getDepartmentMsgList,
} from '@/api/dep_msg.js'
import {systemMessageList} from '@/api/message.js'
import { useUserInfoStore } from '@/store/userInfo.js'

const userInfoStore = useUserInfoStore()
const breadcrumb = ref();
const item = {
    first: '首页',
}
const tableData1 = ref()
const tableData2 = ref()
//获取所有轮播图
const imageUrl = ref()
const getAllSwiperData = async () => {
    const res = await getAllSwiper()
    imageUrl.value = res.data
}
getAllSwiperData()
// 获取通知公告
const introduce = ref()
const getNoticeData = async () => {
    const res = await getPolicy()
    introduce.value = res.data.results
}
getNoticeData()
// 打开通知公告
const introduceRef = ref()
const openIntroduce = (index: number) => {
    bus.emit('introduce', index)
    introduceRef.value.open()
}
// 获取部门消息
const getDepartmentMsg = async () => {
    const res = await getDepartmentMsgList(userInfoStore.department)
    console.log(res);
    tableData1.value = res.data
}
getDepartmentMsg()
//获取系统消息
const getSystemMsg = async () => { 
    const res = await systemMessageList()
    tableData2.value = res.data
}
getSystemMsg()
</script>

<template>
    <BreadCrumb ref="breadcrumb" :item="item"></BreadCrumb>
    <div class="home-warpped">
        <!-- 轮播图 -->
        <div class="swiper-wrapped">
            <el-carousel trigger="click" height="320px">
                <el-carousel-item v-for="(item, index) in imageUrl" :key="item">
                    <img :src='item' class="swiper">
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 栅格 -->
        <div class="layout-wrapped">
            <el-row :gutter="20">
                <el-col :span="6" v-for="(item, index) in introduce" :key="index" @click="openIntroduce(index + 1)">
                    <div class="about-content">
                        <span>{{ item.set_name }}</span>
                        <div class="about-introduce" v-html="item.set_text"></div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 表格 -->
        <div class="two-table-wrapped">
            <div class="about-notice">
                <span class="title">相关通知</span>
                <el-table :data="tableData1" style="width: 100%" >
                    <el-table-column prop="message_title" label="主题" width="180" />
                    <el-table-column prop="message_publish_department" label="发布部门" width="180" />
                    <el-table-column prop="message_publish_time" label="发布时间">
                        <template #default="{row}">
                            {{ row.message_publish_time?.slice(0, 10) }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="about-system-message">
                <span class="title">系统消息</span>
                <el-table :data="tableData2" style="width: 100%" >
                    <el-table-column prop="message_title" label="主题" width="180" />
                    <el-table-column prop="message_publish_name" label="发布人" width="180" />
                    <el-table-column prop="message_publish_time" label="发布时间">
                        <template #default="{row}">
                            {{ row.message_publish_time?.slice(0, 10) }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
    <Introduce ref="introduceRef"></Introduce>
</template>

<style scoped lang="scss">
@mixin table-class {
    height: 232px;
    width: 48%;
    display: flex;
    flex-direction: column;
}

.home-warpped {
    padding: 8px;
    height: calc(100vh - 101px);
    background: #f5f5f5;
    display: flex;
    flex-direction: column;

    .swiper-wrapped {
        padding: 0 20px;
        background: #fff;
        margin-bottom: 8px;

        .swiper {
            width: 100%;
            height: 100%;
        }
    }

    .layout-wrapped {
        padding: 8px;
        margin-bottom: 8px;
        background: #fff;

        // 相关内容样式
        .about-content {
            background: #f5f5f5;
            height: 200px;
            padding: 8px;
            cursor: pointer;

            span {
                border-bottom: 1px solid #409eff;
                font-size: 14px;
            }

            .about-introduce {
                text-indent: 24px;
                font-size: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 3;
                display: -webkit-box;
                -webkit-box-orient: vertical;
            }
        }


        .about-content:hover {
            cursor: pointer;
            background-color: #eef5ff;
        }
    }

    .two-table-wrapped {
        height: 232px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        background: #fff;

        .about-notice {
            @include table-class;
        }

        .about-system-message {
            @include table-class;
        }

        .title {
            font-size: 14px;
            margin-bottom: 5px;
            border-bottom: 1px solid #ea0709;
        }
    }

    // 轮播图样式
    .el-carousel__item h3 {
        color: #475669;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
        text-align: center;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
    }
}
</style>